<template>
	<div>
		<el-row>
			<el-col :span="17" class=" border-right">
				<div class="padding border-bottom flex justify-content-end align-items-center">
					<div>
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px">
							<el-form-item label="平台" class="m-0">
								<el-select v-model="ruleForm.region" placeholder="请选择平台">
									<el-option label="区域一" value="shanghai"></el-option>
									<el-option label="区域二" value="beijing"></el-option>
								</el-select>
							</el-form-item>
						</el-form>
					</div>
					<div class="p-l-10"><font-awesome-icon :icon="['fa', 'bolt']" class="text-blue" /></div>
					<div class="p-l-10"><font-awesome-icon :icon="['fa', 'volume-up']" class="text-blue" /></div>
					<div class="p-l-10"><font-awesome-icon :icon="['fa', 'envelope']" class="text-blue" /></div>
				</div>
				<h4 class="title">总交易量</h4>
				<div class="text-center">
					<span class="text-large">123,234</span>
					笔
				</div>
				<el-row class="text-center" style="margin-top: 30px; margin-bottom: 20px;">
					<el-col :span="6">
						<div>2019-02-10：</div>
						<div class="m-t-10">
							<span class="text-blue">0</span>
							笔
						</div>
					</el-col>
					<el-col :span="6">
						<div>闲比：</div>
						<div class="m-t-10">
							<span class="text-blue">0</span>
							%
						</div>
					</el-col>
					<el-col :span="6">
						<div>TPS：</div>
						<div class="m-t-10">
							<span class="text-blue">1</span>
							笔/秒
						</div>
					</el-col>
					<el-col :span="6">
						<div>ATT：</div>
						<div class="m-t-10">
							<span class="text-blue">1</span>
							笔/秒
						</div>
					</el-col>
				</el-row>

				<hr class="border" />
				<h4 class="title">总体交易趋势</h4>
				<div style="height: 200px;">图表</div>
				<hr class="border" />
				<el-row>
					<el-col :span="12">
						<h4 class="title">TPS</h4>
						<div style="height: 200px;">图表</div>
					</el-col>
					<el-col :span="12">
						<h4 class="title">RTT</h4>
						<div style="height: 200px;">图表</div>
					</el-col>
				</el-row>
			</el-col>

			<el-col :span="7" class="padding">
				<h4 class="title m-0">
					<font-awesome-icon :icon="['fas', 'exclamation-circle']" class="text-red" />
					告警列表
				</h4>
				<el-row>
					<el-col :span="10" class="padding">
						告警总数：
						<span class="text-red">123</span>
					</el-col>
					<el-col :span="7" class="padding">
						严重：
						<span class="text-yellow">123</span>
					</el-col>
					<el-col :span="7" class="padding">
						严重：
						<span class="text-yellow">123</span>
					</el-col>
				</el-row>
				<div class="text-center">
					<img src="../assets/img-01.png" width="50%" alt="" />
					<div class="text-gray">暂无告警信息</div>
				</div>
				<hr class="border" />
				<h4 class="title">应用服务TOP5</h4>
				<div style="height: 200px;">图表</div>
				<hr class="border" />
				<h4 class="title">TSSC</h4>
				<div style="height: 200px;">图表</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default {
	data() {
		return {
			ruleForm: {
				region: ''
			},
			rules: {
				region: [{ required: true, message: '请选择平台', trigger: 'change' }]
			}
		};
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
	height: 40px;
	line-height: 40px;
	color: #303133;
}

.text-large {
	font-size: 36px;
}
</style>
